<template>
    <div class="f-mr-10">
        <el-dropdown @command="onLanguageChange">
            <div class="language-selector">
                {{ langStore.lang }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="en-US">EN</el-dropdown-item>
                    <el-dropdown-item command="zh-CN">ZH</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <!-- <div class="pointer df ai-c">
            <img class="lang-box" src="./imgs/cn.svg" v-if="locale === 'zh-CN'" @click="onLanguageChange('en-US')" />
            <img class="lang-box" src="./imgs/en.svg" v-else @click="onLanguageChange('zh-CN')" />
        </div> -->
    </div>
</template>

<script setup lang="ts">
import { useLangStore } from '@/stores/lang';
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
const langStore = useLangStore();

import { Locale } from 'vant';
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/es/locale/lang/zh-CN';

const vantLangs: any = {
    'en-US': enUS,
    'zh-CN': zhCN,
};

Locale.use(locale.value, vantLangs[locale.value]);

const onLanguageChange = (language: string) => {
    locale.value = language;
    langStore.setLang(language);
    // vant 语言包切换
    Locale.use(language, vantLangs[language]);
};
</script>

<style scoped lang="scss">
.lang-box {
    width: 40px;
    height: 40px;
}
</style>
